<template>
<div class="frienddetaillayout">
  <!-- 列表栏 -->
            <div class="friendlist">
                <div class="friendsearch">
                    <span>好友列表</span>
                </div> 

                <div class="friendlists">
                    <ul class="friendlistsul">   
                        <li class="friendlistli" v-for="i of showList" :key="i&&i.user&&i.user.id">                    
                                <div class="friendavaname" @click="getUserDetail(i&&i.user&&i.user.id)">
                                    <div class="friendavatar">
                                        <el-avatar :src="i&&i.user&&i.user.imgurl"></el-avatar>
                                        <div v-if="i.state!=0">
                                             <el-badge :value="1" :max="99" class="item"></el-badge>
                                        </div>
                                        <div class="friendname">
                                            <span>{{i&&i.user&&i.user.name}}</span>
                                        </div> 
                                    </div>  
                                    <div class="friendtime">
                                        <span>{{dateformate(i.time)}}</span>
                                    </div>  
                                </div>                 
                        </li>
                    </ul>
                </div>
            </div>

  <div class="friendcontent">
      <div class="frienduserdetailout">
              <div class="frienduserdetail" v-if="this.detailData.id">
                    <div class="frienddetailavatar">
                        <img :src="detailData.imgurl">
                    </div>

                    <div :class="this.color">
                    <span>{{detailData.name}} <el-button :type="this.type" :icon="this.male" circle></el-button></span>
                    </div>  

                    <div class="friendexplain">
                    <p>{{detailData.explain}}</p>
                    </div>

                    <div class="frienddetailmail">
                        <span>邮箱账号：{{detailData.email}}</span>
                    </div>

                    <div class="frienddetailtime">
                        <span>生日：{{this.dateformatedetail(detailData.birth)}}</span>
                        <span>注册时间：{{this.dateformatedetail(detailData.time)}}</span>
                    </div>

                    <div class="frienddetailbutton">
                       <div v-if="friendState===1" class="agreeapply">
                            <el-button  type="success" @click="dialogVisible = true">同意申请</el-button>
                        </div>

                        <div v-if="friendState===1" class="refuseapply">
                            <el-button  type="danger" @click="deleteFriend">拒绝申请</el-button>
                        </div>
                        <div v-if="friendState===0" class="sendmessage">
                             <el-button type="primary" @click="toFriendMessageList">发送信息</el-button>
                        </div> 

                        <div v-if="friendState===0" class="deletefriend">
                            <el-button type="danger" @click="deleteFriend">删除好友</el-button>
                        </div> 

                        <div v-if="friendState==2" class="friendState2">等待对方同意好友申请</div>

                    </div>
                    <el-dialog
                        title="设置好友昵称"
                        :visible.sync="dialogVisible"
                        width="30%">
                        <el-input v-model="nickName" placeholder="设置对方昵称"></el-input>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="updateFriendState">确 定</el-button>
                        </span>
                    </el-dialog>
            </div> 
            <div v-if="!this.detailData.id" class="frienduserdetail">
                <span>您还没有好友，快去寻找新朋友吧！</span>
            </div>
        </div>      
     </div>
</div>
  
  
</template>

<script>
import request from "../utils/request";
export default{
    data(){
        return{
            detailData:{   //好友详情信息
                id:"",
                name:"",
                sex:"",
                birth:"",
                explain:"",
                imgurl:"",
                email:"",
                time:""
            },
            male:"",   //男女标志
            type:"",   //按键样式男女区分
            color:"",   //用户名字体颜色男女区分
            showList:"",  //展示的好友列表
            friendState:"",  //好友状态
            dialogVisible: false, //控制设置好友昵称弹出框
            nickName:"",   //好友昵称
            // friendList:"",
            // keyword:"",   
        }
    },

    created(){
        this.getFriendList();
    },

    methods:{
        //获取用户信息
        getUserDetail(id){
        request.get(`/friend/friendDetail/${id}`).then((res)=>{
            this.detailData.id=res.data.friendDetail.id;
            this.detailData.name=res.data.friendDetail.name;
            this.detailData.sex=res.data.friendDetail.sex;
            this.detailData.birth=res.data.friendDetail.birth;
            this.detailData.explain=res.data.friendDetail.explain;
            this.detailData.imgurl=res.data.friendDetail.imgurl;
            this.detailData.email=res.data.friendDetail.email;
            this.detailData.time=res.data.friendDetail.time
            //获取好友状态
            this.friendState=res.data.friendState.state;
            if(res.data.friendDetail.sex=="男"){
                this.male="el-icon-male";
                this.type="primary";
                this.color="frienddetailname1"

            }else{
                this.male="el-icon-female";
                this.type="danger";
                this.color="frienddetailname2"
            } 
        })
        },
        //转换详情信息时间格式
        dateformatedetail(time) {
            let date = new Date(time);
            let year = date.getFullYear();
            let month = date.getMonth()+1;
            let day = date.getDate();
            let result = `${year}-${month}-${day}`;
            return result
        },
        //修改时间格式
        dateformate(time) {
            let date = new Date(time);
            let year = date.getFullYear();
            let month = date.getMonth()+1;
            let day = date.getDate();
            let hour = date.getHours();
            let minutes = date.getMinutes();
            let result = `${year}-${month}-${day} ${hour}:${minutes}`;
            return result
        },
    

        getFriendList(){
            request.get('/friend/friendList').then((res)=>{
                console.log(res.data.rows);
                this.showList=res.data.rows;
                this.getUserDetail(res.data.rows[0]&&res.data.rows[0].user&&res.data.rows[0].user.id);
            })
        },

          //同意好友申请（即更新好友状态）
        updateFriendState(){
            request.post('friend/updateFriendState',{friend_id:this.detailData.id,nickName:this.nickName}).then((res)=>{
                window.alert(res.data);
                this.dialogVisible=false;
                this.getUserDetail(this.detailData.id);
                this.getFriendList();
               
            })
        },

        //删除好友
        deleteFriend(){
            let r=confirm("确定解除好友关系吗？");
            if(r==true){
                request.post('/friend/deleteFriend',{friend_id:this.detailData.id}).then((res)=>{
                window.alert(res.data);
                this.getFriendList();
                })
            }  
        },
        
        //发送信息
        toFriendMessageList(){
            request.get(`/toFriendMessageList/${this.detailData.id}`).then((res)=>{
                if(res.data){
                     this.$router.push('/messageList')
                } 
            })
        }
    }
}
</script>

<style scoped>

* {
    box-sizing:border-box
}
.frienddetaillayout{
width:100%;
height:100%;
background-color:#2c3e50; 
border-radius: 0px 40px 40px 0px;
display: flex;
justify-content:space-between;
}

.friendlist{
    height:100%;
    width:40%;
    padding:20px;
    padding-right: 15px;
    background-color: #2c3e50;
}
.friendsearch{
    color: rgb(237, 241, 244);
    font-size: 18px;
    display: grid;
   place-items: center;
    background-color: #70b2f5;
    padding-bottom: 0px;
    padding-top:5px;
    height:10%;
    border-radius: 5px 5px 0px 0px;
}
 .friendlists{
     background-color: white;
     height:90%;
     overflow:auto;
     border-radius: 0px 0px 5px 5px;
     width:100%;
 }

 /* 设置滚动条的样式 */
::-webkit-scrollbar {
width:1px;
}

/* 列表列表样式 */
.friendlistli{
height:60px;
width:100%;
display: flex;
justify-content:space-between;
border-bottom:1px solid rgb(239, 241, 242)
}

.friendlistli:hover{
    background-color: rgb(203, 225, 244);
}

 .friendavaname{
    height:100%;
    display: flex;
    justify-content:space-between;
    width:100%;
}
.friendavatar{
   height:100%;
   /* display: grid;
   place-items: center; */
   display: flex;
   justify-content:flex-start;
   padding:10px
}
.friendname{
    height:100%;
    display: grid;
   place-items: center;
   color:#4c6986;
   padding:10px;
}
.friendname span{
    font-size: 15px;
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.friendtime{
    height:100%;
    display: grid;
   place-items: center;
   padding:10px;
   font-size: 12px;
   color: #56789a;
}  


.friendcontent{
    height:100%;
    width:60%;
}

.frienduserdetailout{
    padding:20px;
    padding-left:5px;
    background-color: #2c3e50;
    height:100%;
    width:100%;
    border-radius: 0px 20px 20px 0px;
} 
.frienduserdetail{
    padding:30px;
    /* background-color: #052f4a; */
    background-image: url("/img/2051855.jpg");
    background-size: cover;
    height:100%;
    width:100%;
    display: grid;
    place-items: center;
    border-radius: 5px 10px 10px 5px;
    color:rgb(237, 239, 241);
    font-size: 19px;
}
.frienddetailavatar{
    height:130px;
    width:130px;
    border-radius: 50%;
    background-color:rgb(212, 222, 237);
    overflow: hidden;
    border: 3px solid rgb(214, 224, 235);
}
.frienddetailavatar img{
    height:130px;
    width:130px;
}
.friendexplain{
    width:70%;
    display: grid;
    place-items: center;
}
.friendexplain p{
    line-height: 2;
    font-size: 18px;
}

.frienddetailname1{
    font-size: 25px;
    color:rgb(9, 151, 246);
}
.frienddetailname2{
    font-size: 25px;
    color:rgb(247, 131, 131);
}
.frienddetailtime{
    width: 70%;
    display: flex;
    justify-content:space-around;
}
.frienddetailtime span{
    display: block;
}
.frienddetailbutton{
    display: flex;
    justify-content:space-around;
}
.sendmessage,.refuseapply,.addfriend,.deletefriend,.agreeapply{
    margin-left:20px;
    margin-right:20px;
}
.friendState2{
    color:white;
    font-size: 16px;
    padding:12px;
    border-radius: 5px;;
    background-color: rgb(8, 97, 97);
}
</style>